<template>
  <van-nav-bar title="首页" />

  <div class="wrap">
    <!-- 搜索组件 -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      background="transparent"
      shape="round"
    />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>

  <van-grid>
    <van-grid-item text="每日福利">
      <template #icon>
        <img
          src="https://s0.meituan.net/bs/?f=myfe/canary:/img/faviconmy.ico"
          style="width: 30px"
          alt=""
        />
      </template>
    </van-grid-item>
    <van-grid-item icon="photo-o" text="热销榜" />
    <van-grid-item icon="photo-o" text="皮撸甄选" />
    <van-grid-item icon="photo-o" text="会员中心" />
  </van-grid>

  <div class="commend">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <div class="products">
    <span class="title">推荐商品</span>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="50"
    >
      <van-card
        v-for="item in recommendList"
        :key="item.productId"
        :title="item.productName"
        :price="item.currentPrice"
        :origin-price="item.originalPrice"
        :thumb="item.imgUrl"
      />
    </van-list>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import useBanner from "./useBanner";

interface ItemType {
  currentPrice: number;
  imgUrl: string;
  originalPrice: number;
  productId: string;
  productName: string;
}

export default defineComponent({
  setup() {
    const [bannerList] = useBanner();
    const value = ref("");

    const recommendList = ref<ItemType[]>([]);
    const loading = ref<boolean>(false);
    const finished = ref<boolean>(false);
    const page = ref<number>(1);
    const onLoad = () => {
      fetch("http://www.pudge.wang:4000/home/recommend", {
        method: "POST",
        body: JSON.stringify({
          count: 3,
          page: page.value,
        }),
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => {
          return response.json();
        })
        .then((res) => {
          if (res.status === "0") {
            recommendList.value = [...recommendList.value, ...res.result.list];
            // 手动将loading再次变成false，就可以进行下一次的请求了
            page.value++;
            loading.value = false;
            if (res.result.list.length < 3) {
              finished.value = true;
            }
          }
        });
    };
    return {
      bannerList,
      value,
      loading,
      finished,
      onLoad,
      recommendList,
    };
  },
});
</script>

<style lang="less" scoped>
.wrap {
  position: relative;

  .van-search {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;

    /deep/.van-search__content {
      background: rgba(255, 255, 255, 0.5);

      .van-field__control::placeholder {
        color: #fff;
      }
    }
  }
}

.my-swipe {
  .van-swipe-item {
    height: 200px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

// 相当于这个css有穿透性，它现在可以影响它的子组件了
/deep/.van-swipe__indicator {
  width: 20px;
  height: 4px;
  border-radius: 0;
  // background: #fff !important;
}

.commend {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 15px;
  background: #fff;
  .item {
    width: 165px;
    height: 100px;
    background: pink;
    margin-bottom: 15px;
  }
}

.products {
  font-size: 14px;
  background: #fff;
  padding: 0 15px;

  &::before {
    content: "";
    width: 6px;
    height: 14px;
    background: red;
    display: inline-block;
  }
}
</style>
